<template>
  <view class="mix-page-header">
    <!-- 搜索 -->
    <view
      class="content header-bar"
      v-if="type === 'search'"
      :style="{
        paddingRight: headerPaddingRight + 'px',
        paddingTop: systemInfo.statusBarHeight + 'px',
        height: systemInfo.navigationBarHeight + systemInfo.statusBarHeight + 'px'
      }"
    >
      <view class="btn" @click="$Router.push('/pages/notice/notice')">
        <view class="msg-box">
          <uni-icons type="chatbubble" size="20"></uni-icons>
          <view class="msg"></view>
        </view>
      </view>
      <view class="search-wrap" :style="{ height: systemInfo.custom.height + 'px' }" @click="$Router.push('/pages/search/search')">
        <uni-icons type="search" color="#999" size="14"></uni-icons>
        <text>输入关键字搜索</text>
      </view>
      <!-- 扫码 -->
      <view v-if="scanCode" class="btn" @click="handleScanCode">
        <uni-icons type="scan" size="20"></uni-icons>
      </view>
    </view>

    <!-- 正常 -->
    <view
      v-else
      class="content header-bar1"
      :style="{
        paddingTop: systemInfo.statusBarHeight + 'px',
        height: systemInfo.navigationBarHeight + systemInfo.statusBarHeight + 'px'
      }"
    >
      <view class="btn">
        <uni-icons v-if="buttonType === 'page'" type="left" size="20" @click="handleBack"></uni-icons>
        <view class="home-icon" v-if="buttonType === 'noPage'">
          <uni-icons type="home" color="#fff" size="20" @click="handleHome"></uni-icons>
        </view>
      </view>
      <view>{{ title }} </view>
      <view class="btn"> </view>
    </view>

    <!-- 占位栏 -->
    <view v-if="showFillView" :style="[{ minHeight: systemInfo.navigationBarHeight + systemInfo.statusBarHeight + 'px' }]"></view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'HomePageHeader',
  data() {
    return {}
  },
  props: {
    type: {
      type: String,
      default: ''
    },
    //顶部是否占位
    showFillView: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    scanCode: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(['systemInfo']),
    //小程序右侧需要留出气泡空间
    headerPaddingRight() {
      // #ifndef MP
      return 0
      // #endif
      // #ifdef MP
      return this.systemInfo.custom.width + 20
      // #endif
    },

    buttonType() {
      const pages = getCurrentPages()
      console.log(pages)
      const isTabbar = pages[pages.length - 1].route.includes('pages/tabbar')
      if (isTabbar) {
        return 'tabbar'
      } else if (pages.length > 1) {
        return 'page'
      } else {
        return 'noPage'
      }
    }
  },
  methods: {
    handleScanCode() {
      uni.scanCode({
        success: res => {
          const result = res.result
          if (typeof result === 'string') {
            return uni.navigateTo({ url: '/pages/public/web-view?url=' + result })
          }
          //这里处理自定义逻辑
        }
      })
    },

    handleBack() {
      const pages = getCurrentPages()
      if (pages.length <= 1) return false
      uni.navigateBack({ delta: 1 })
    },

    handleHome() {
      uni.switchTab({ url: '/pages/tabbar/home' })
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 98;
  width: 100%;
  background-color: #fff;
}
.header-bar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.header-bar1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.btn {
  display: flex;
  align-items: center;
  width: 88rpx;
  height: 40rpx;
  padding: 10rpx 24rpx;

  .home-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e8e8e8;
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
  }
  .msg-box {
    position: relative;
    .msg {
      position: absolute;
      right: -16rpx;
      top: -5rpx;
      width: 24rpx;
      height: 24rpx;
      background-color: red;
      border: 4rpx solid #fff;
      border-radius: 200rpx;
      opacity: 1;

      &.show {
        opacity: 1;
      }
    }
  }
}
.search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 28rpx;
  color: #999;
  border-radius: 200rpx;
  padding-left: 20rpx;
  background-color: #e6e6e6;

  .icon-sousuo {
    margin-right: 12rpx;
    font-size: 36rpx;
    color: #999;
  }
}
</style>
